<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<style>
	*{margin: 0;padding: 0}
	body{font-size: 18px;
	font-family:"微软雅黑";
	background: url("./壁纸.jpg")  no-repeat top center;
	color: aliceblue;}
	
	form{width: 420px;
	       height: 400px;
	     background-color: rgba(255,255,255,0.1);  
	     border:1px solid (255,255,255,0.3);
		border-radius:20px; 
		margin: 100px auto;
		padding-top: 40px;
	}
	form h3{text-align: center;}
	form p{margin-top: 15px;
	       text-align: center;}
	p span{width: 100px;
	display: inline-block;
	text-align: right;}
	
	.ctrStyle{width: 165px;
	          height: 18px;
	          border:1px solid (255,255,255,0.3);
	border-radius: 5px;
	background-color:rgba(255,255,255,0.1);
	color: #fff;
	padding: 2px 2px 2px 22px;}
	
	
	.user{background: url(注册表单实训素材/3.png) no-repeat 5px center}
	.psw{background: url(注册表单实训素材/4.png)
	no-repeat 5px center}
	.leftspan{width: 192px;
	          text-align: left;
	padding: 2px 10px}
	
	.selStyle{width: 190px;
	          height:24px;}
	
	option{background-color: rgba(46,84,97,0.3);}
	.btn{width: 100px;
	     height: 25px;
	     border-radius: 5px;
	     border:2px solid rgba(255,255,255,0.3);
	     margin-left: 20px;
	     background-color: rgb(110, 193, 238);
		 color: #fff;
		 font-size: 16px;
	     font-weight: bold;}
	
	
	
	
	</style>	
</head>

<body>
<form action="#" method="get">
  <h3>会员注册</h3>
  <p>
  	<span>账号：</span><input class="ctrStyle user" type="text" placeholder="5-8位字符">
  	</p>	
   <p>
  	<span>密码：</span><input class="ctrStyle psw" type="password" placeholder="6-8位字母" pattern="^[a-zA-Z\w{5,7}]$">
  	</p>	
	
	<p>
		<span>性别:</span>
    <span class="leftspan">
	    <label><input  type="radio" name="sex" checked>男</label>&nbsp;&nbsp;
		    <label1><input type="radio"name="sex">女</label1>
		</span>
	</p>
	
	<p>
		<span>出生月份:</span><input class="ctrStyle" type="number" min="1" max="12">
		</p>
		
		<p>
		<span>所在区域：</span>	
		<select class="ctrStyle">
		 <option value="hb">华北</option>
		  <option value="hb">华南</option>	<option value="hb">华东</option>
		 <option value="hb">华西</option>
			</select>
			
		</p>
		
		<p>
			<input type="checkbox">&nbsp;记住密码
			</p>
			
			<p>
				<input class="btn" type="submit" value="注册">
				<input class="btn" type="reset">
				
			</p>
	
</form>



</body>
</html>
